<script setup lang="ts">
import { ref } from 'vue'
import type { TableInstance } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'

interface Appointment {
  id: number
  studentName: string
  counselorName: string
  appointmentTime: string
  status: string
  type: string
  notes: string
}

const tableData = ref<Appointment[]>([
  {
    id: 1,
    studentName: '张三',
    counselorName: '张医生',
    appointmentTime: '2024-01-15 14:00',
    status: '已预约',
    type: '个人咨询',
    notes: '学业压力问题'
  },
  {
    id: 2,
    studentName: '李四',
    counselorName: '李医生',
    appointmentTime: '2024-01-16 10:00',
    status: '已完成',
    type: '个人咨询',
    notes: '人际关系问题'
  }
])

const searchQuery = ref('')
const currentPage = ref(1)
const pageSize = ref(10)

const handleSearch = () => {
  // TODO: 实现搜索功能
}

const dialogVisible = ref(false)
const dialogTitle = ref('')
const currentAppointment = ref<Appointment>({
  id: 0,
  studentName: '',
  counselorName: '',
  appointmentTime: '',
  status: '已预约',
  type: '个人咨询',
  notes: ''
})

const handleAdd = () => {
  dialogTitle.value = '新增预约'
  currentAppointment.value = {
    id: 0,
    studentName: '',
    counselorName: '',
    appointmentTime: '',
    status: '已预约',
    type: '个人咨询',
    notes: ''
  }
  dialogVisible.value = true
}

const handleEdit = (row: Appointment) => {
  dialogTitle.value = '编辑预约'
  currentAppointment.value = { ...row }
  dialogVisible.value = true
}

const handleDelete = (row: Appointment) => {
  ElMessageBox.confirm('确定要删除该预约吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    tableData.value = tableData.value.filter(item => item.id !== row.id)
    ElMessage.success('删除成功')
  })
}

const handleSubmit = () => {
  if (!currentAppointment.value.studentName || !currentAppointment.value.counselorName || !currentAppointment.value.appointmentTime) {
    ElMessage.error('请填写完整信息')
    return
  }

  if (currentAppointment.value.id === 0) {
    // 新增
    currentAppointment.value.id = tableData.value.length + 1
    tableData.value.push(currentAppointment.value)
    ElMessage.success('新增成功')
  } else {
    // 编辑
    const index = tableData.value.findIndex(item => item.id === currentAppointment.value.id)
    tableData.value[index] = { ...currentAppointment.value }
    ElMessage.success('编辑成功')
  }
  dialogVisible.value = false
}

const handleStatusChange = (row: Appointment) => {
  // TODO: 实现状态更改功能
}
</script>

<template>
  <div class="appointments-container">
    <div class="header">
      <h2>预约管理</h2>
      <div class="actions">
        <el-input v-model="searchQuery"
          placeholder="搜索预约"
          class="search-input"
          @keyup.enter="handleSearch">
          <template #append>
            <el-button @click="handleSearch">
              <el-icon>
                <Search />
              </el-icon>
            </el-button>
          </template>
        </el-input>
        <el-button type="primary"
          @click="handleAdd">新增预约</el-button>
      </div>
    </div>

    <el-table :data="tableData"
      style="width: 100%"
      table-layout="fixed"
      border>
      <el-table-column prop="id"
        label="ID"
        width="80"
        align="center" />
      <el-table-column prop="studentName"
        label="学生姓名"
        width="120" />
      <el-table-column prop="counselorName"
        label="咨询师"
        width="120" />
      <el-table-column prop="appointmentTime"
        label="预约时间"
        width="180" />
      <el-table-column prop="type"
        label="咨询类型"
        width="120" />
      <el-table-column prop="status"
        label="状态"
        width="100"
        align="center">
        <template #default="{ row }">
          <el-tag :type="row.status === '已完成' ? 'success' : row.status === '已预约' ? 'primary' : 'info'"
            effect="dark">
            {{ row.status }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="notes"
        label="备注"
        min-width="200" />
      <el-table-column label="操作"
        width="200"
        align="center"
        fixed="right">
        <template #default="{ row }">
          <el-button link
            type="primary"
            @click="handleEdit(row)">编辑</el-button>
          <el-button link
            type="success"
            @click="handleStatusChange(row)">更改状态</el-button>
          <el-button link
            type="danger"
            @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model="dialogVisible"
      :title="dialogTitle"
      width="600px">
      <el-form :model="currentAppointment"
        label-width="100px">
        <el-form-item label="学生姓名"
          prop="studentName"
          required>
          <el-input v-model="currentAppointment.studentName" />
        </el-form-item>
        <el-form-item label="咨询师"
          prop="counselorName"
          required>
          <el-input v-model="currentAppointment.counselorName" />
        </el-form-item>
        <el-form-item label="预约时间"
          prop="appointmentTime"
          required>
          <el-date-picker v-model="currentAppointment.appointmentTime"
            type="datetime"
            placeholder="选择日期时间"
            value-format="YYYY-MM-DD HH:mm"
            :locale="zhCn" />
        </el-form-item>
        <el-form-item label="咨询类型"
          prop="type">
          <el-select v-model="currentAppointment.type">
            <el-option label="个人咨询"
              value="个人咨询" />
            <el-option label="团体咨询"
              value="团体咨询" />
            <el-option label="职业规划"
              value="职业规划" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态"
          prop="status">
          <el-select v-model="currentAppointment.status">
            <el-option label="已预约"
              value="已预约" />
            <el-option label="已完成"
              value="已完成" />
            <el-option label="已取消"
              value="已取消" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注"
          prop="notes">
          <el-input v-model="currentAppointment.notes"
            type="textarea"
            :rows="3" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary"
          @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>

    <div class="pagination">
      <el-pagination v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :total="50"
        :page-sizes="[10, 20, 30, 50]"
        layout="total, sizes, prev, pager, next, jumper" />
    </div>
  </div>
</template>

<style scoped>
.appointments-container {
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.actions {
  display: flex;
  gap: 10px;
}

.search-input {
  width: 300px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>
